<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:fb="http://ogp.me/ns/fb#">
	  
<h:head>
  <title>Testing</title>
  <link rel="stylesheet" type="text/css" href="css/main.css"/>
  <link rel="stylesheet" type="text/css" href="css/skin.css"/>
</h:head>
<h:body>

<div id="main">
		<!-- HEADER -->
		<div id="header" class="box">
				<p id="logo"><a href="./" title="[Go to homepage]"><img src="design/logo.png" alt="" /></a></p>
				<!-- INFO: Used font is named "BALLPARK", you can download it for free here: http://www.fontsquirrel.com/fonts/Ballpark -->
				<!-- NAVIGATION -->
				<ul id="nav">
					<li class="current"><a href="#"><span>Homepage</span></a></li>
					<li><a href="#"><span>Info</span></a></li>
				</ul>		
		</div> <!-- /header -->
 
 	<!-- COLUMNS -->
	<h1 id="title">Mainboard</h1>
	
	
	
	<div id="section" class="box">
	    
	    <h3>Descripción</h3>
		 <p class="box"><img src="images/tiare.jpg" alt="" class="f-left" />  
		 JDK 1.7, Maven, JSF, PrimeFaces, TestNG, Hibernate, Postgresql. Tomcat 7. 
		 <br></br>
		 <br></br>
		 Página ejemplo desarrollada por Rubén Barroso Robleda. 
	
		<hr></hr>
		
		<div align="center"  style=" width: 60%;height: 21px;margin:0 auto;">
			<div style="float: left; width: 150px;height: 21px;padding: 5px; padding-left: 60px;text-align: right;">
				<fb:like href="www.tiare.redirectme.net" send="false" width="450" show_faces="false" layout="button_count"></fb:like>
			</div>
			<div align="center" style="height: 21px;padding: 6px " >
				<a href="https://twitter.com/ruVens_" class="twitter-follow-button" data-show-count="true" data-lang="es">Follow @twitterapi</a>
			</div>
		</div>
		</p>
		
		<div id="fb-root"></div>
		<script>(function(d, s, id) {
		  var js, fjs = d.getElementsByTagName(s)[0];
		  if (d.getElementById(id)) return;
		  js = d.createElement(s); js.id = id;
		  js.src = "//connect.facebook.net/es_LA/all.js#xfbml=1";
		  fjs.parentNode.insertBefore(js, fjs);
		}(document, 'script', 'facebook-jssdk'));</script>
	
	    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
		
		<hr></hr>
		
		<h3>Deja tu opinion:</h3>
	    <!-- CONTENT -->
		<div id="content">
	
			<h:form id="nuevoMensaje"  class="form">
			
		    <label>Nickname (not required): </label> <br></br>
		    <h:inputText id="inNick"  binding="#{beanMensajes.inputNick}" value="#{beanMensajes.mensaje.usuario}" class="input-text">
		    <f:validator validatorId="es.tiare.validation.Required50" />
		    </h:inputText>  <br></br>
		    <label>Text (required): </label><br></br>
		    <h:inputTextarea id="inMensaje" binding="#{beanMensajes.inputText}" required="true" requiredMessage="Campo 'Text' obligatorio."  value="#{beanMensajes.mensaje.mensaje}" class="input-text" rows="4" cols="100">
			<f:validator validatorId="es.tiare.validation.Required300" />
			</h:inputTextarea> 
			<br></br>

 	<!-- MODAL CONFIRMACION -->


          <p:confirmDialog id="confirmDialog" message="Gracias por colaborar, tu opinión es importante y nos ayuda a mejorar."  
                header="Mensaje enviado" severity="info" widgetVar="confirmation">  
              
            <div align="right"> 
	        <p:commandButton id="confirm" value="Aceptar" oncomplete="confirmation.hide()" actionListener="#{beanMensajes.limpiarForm}" update="inMensaje,inNick" />      
   			</div>  
   			</p:confirmDialog>
      <!-- FIN:::: MODAL CONFIRMACION -->
		    <p:commandButton value="Enviar" actionListener="#{beanMensajes.guardarMensaje}" update=":contentAjax"  oncomplete="if (!args.validationFailed){confirmation.show()}" />
		    </h:form>	
		    <p:messages id="messages" autoUpdate="true"/>  
  
		<hr></hr>
		    	    	     
		<h3>Opiniones previas: </h3>
		
    <div id= "pContent" style="margin:0 auto 0 auto; width:80%;" >
    
    <h:panelGroup id="contentAjax" layout="block">
    <br></br>           
    <ui:repeat var="mensajeS" value="#{beanMensajes.mensajes}">
		<div style="border-bottom:inset #0094B4 2px;height: 120px; width: 600px; margin-left: auto; margin-right: auto ;">			
				<label style="color:#0094B4; font-size:160%;"> #${mensajeS.id} </label> <h:outputText value="${empty mensajeS.usuario ? 'Anónimo': mensajeS.usuario}"/> escribió: <br></br>		
				<label style="width:80%; word-wrap:break-word;"  > ${mensajeS.mensaje} </label> 
		</div>        	            			
	</ui:repeat>	
	</h:panelGroup>
    </div>    
		    
		</div>
		
	</div>
	
  
  <br></br>
    
   	<!-- CONTACT -->
	<div id="contact">

		<address>
			Tiaré <span>|</span>
			<a href="mailto:ruben.ps2@gmail.com">ruben.ps2@gmail.com</a> <span>|</span>
		</address>		

	</div> <!-- /contact -->	
	
	<!-- FOOTER -->
	<div id="footer" class="box">

	</div> <!-- /footer -->

</div>

<br></br>

   
</h:body>
</html>